<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tax Calculator</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      html,
      body,
      #app {
        width: 100%;
        height: 100%;
        overflow: hidden;
      }

      [v-cloak] {
        display: none;
      }

      .container {
        width: 800px;
        margin: 30px auto;
        padding: 0 20px;
        box-sizing: border-box;
      }

      label {
        cursor: pointer;
      }

      .pay {
        width: 100%;
        height: 100px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
      }

      .pay-con {
        width: 50%;
        display: flex;
        align-items: center;
      }

      .pay-con label {
        margin-right: 20px;
      }

      .pay-con input {
        width: 200px;
        height: 26px;
        text-indent: 0.3em;
        border: none;
        border: 1px solid #999;
        border-radius: 2px;
        outline: none;
      }

      .payVisi {
        width: 100%;
        margin-top: 20px;
      }

      .payVisi p {
        line-height: 30px;
      }

      .payVisi p:last-child {
        font-size: 24px;
        color: goldenrod;
      }

      .payVisi p span:first-child {
        color: crimson;
      }

      .payVisi p span:nth-child(2) {
        color: deepskyblue;
      }

      .payVisi p span:last-child {
        color: darkgreen;
      }

      .main .presentation {
        border: 1px dotted #333;
        border-left: none;
        border-right: none;
      }

      .main .presentation > div {
        height: 30px;
        padding: 5px 0;
        display: flex;
        align-items: center;
      }

      .main .presentation > div label {
        width: 70px;
        text-align: right;
        padding-right: 20px;
      }

      .main .presentation > div div {
        width: 50px;
        display: flex;
        margin-right: 20px;
        border: 1px solid #999;
        border-radius: 2px;
      }

      .main .presentation > div div input {
        width: 30px;
        border: none;
        outline: none;
        text-align: right;
        padding-right: 5px;
      }

      .result-content {
        margin: 20px 0;
      }

      .result-content div {
        display: flex;
        margin: 5px 0;
      }

      .result-content div label {
        width: 70px;
        text-align: right;
        padding-right: 20px;
      }
    </style>
  </head>
  <script src="./vue.js"></script>

  <body>
    <div id="app">
      <div class="container">
        <div class="pay">
          <div class="pay-con base-content">
            <label for="base">基本工资</label>
            <input id="base" type="text" v-model.number="base" />
          </div>
          <div class="pay-con merit-content">
            <label for="merit">绩效工资</label>
            <input id="merit" type="text" v-model.number="merit" />
          </div>
        </div>
        <div class="payVisi" v-cloak>
          <p>
            基本工资: <span>{{ base }}</span>  绩效工资:
            <span>{{ merit }}</span> 你的税前工资是: <span>{{ result }}</span>
          </p>
            
          <p v-show="result < 5000">加油干吧兄弟，挣这点钱不用交税！</p>
        </div>
        <div class="main" v-show="result > 5000" v-cloak>
          <div class="presentation">
            <div>
              <label for="pensionNum">养老保险</label>
              <div>
                <input
                  id="pensionNum"
                  type="text"
                  v-model.number="pensionNum"
                />
                <em>%</em> 
              </div>
              <span>{{ pension }}</span>
            </div>
            <div>
              <label for="medicalNum">医疗保险</label>
              <div>
                <input
                  id="medicalNum"
                  type="text"
                  v-model.number="medicalNum"
                />
                <em>%</em> 
              </div>
              <span>{{ medical }}</span>
            </div>
            <div>
              <label for="InjuryNum">工伤保险</label>
              <div>
                <input id="InjuryNum" type="text" v-model.number="InjuryNum" />
                <em>%</em> 
              </div>
              <span>{{ Injury }}</span>
            </div>
            <div>
              <label for="birthNum">生育保险</label>
              <div>
                <input id="birthNum" type="text" v-model.number="birthNum" />
                <em>%</em> 
              </div>
              <span>{{ birth }}</span>
            </div>
            <div>
              <label for="unemploymentNum">失业保险</label>
              <div>
                <input
                  id="unemploymentNum"
                  type="text"
                  v-model.number="unemploymentNum"
                />
                <em>%</em> 
              </div>
              <span>{{ unemployment }}</span>
            </div>
            <div>
              <label for="accumulationFundNum">公积金</label>
              <div>
                <input
                  id="accumulationFundNum"
                  type="text"
                  v-model.number="accumulationFundNum"
                />
                <em>%</em> 
              </div>
              <span>{{ accumulationFund }}</span>
            </div>
          </div>
          <div class="result-content">
            <div>
              <label>税前工资</label>
              <span>{{ result }}</span>
            </div>
            <div>
              <label>个税</label>
              <span>{{ personalTax }}</span>
            </div>
            <div>
              <label>税后工资</label>
              <span>{{ afterTax }}</span>
            </div>
          </div>
        </div>
      </div>
         
    </div>
    <script>
      new Vue({
        el: "#app",
        data: {
          base: 10000,
          merit: null,
          result: null,
          pensionNum: 8,
          medicalNum: 2,
          InjuryNum: 0.5,
          birthNum: 0,
          unemploymentNum: 0,
          accumulationFundNum: 8,
          personalTaxNum: 2.2,
        },
        methods: {},
        computed: {
          calc: function () {
            return (this.result = this.base + this.merit);
          },
          pension: function () {
            return (this.calc * (this.pensionNum / 100)).toFixed(2);
          },
          medical: function () {
            return (this.calc * (this.medicalNum / 100)).toFixed(2);
          },
          Injury: function () {
            return (this.calc * (this.InjuryNum / 100)).toFixed(2);
          },
          birth: function () {
            return (this.calc * (this.birthNum / 100)).toFixed(2);
          },
          unemployment: function () {
            return (this.calc * (this.unemploymentNum / 100)).toFixed(2);
          },
          accumulationFund: function () {
            return (this.calc * (this.accumulationFundNum / 100)).toFixed(2);
          },
          personalTax: function () {
            return (this.calc * (this.personalTaxNum / 100)).toFixed(2);
          },
          afterTax: function () {
            console.log(
              Number(this.pension) +
                Number(this.medical) +
                Number(this.Injury) +
                Number(this.birth) +
                Number(this.unemployment) +
                Number(this.accumulationFund) +
                Number(this.personalTax)
            );
            return (
              this.calc -
              (Number(this.pension) +
                Number(this.medical) +
                Number(this.Injury) +
                Number(this.birth) +
                Number(this.unemployment) +
                Number(this.accumulationFund) +
                Number(this.personalTax))
            );
          },
        },
      });
    </script>
  </body>
</html>
